<script setup lang="ts">
import indexApi from '@/api/index.ts'
import Sign from '@/view/components/sign/index.vue'
import {onMounted, ref} from "vue";
import {message} from "ant-design-vue";
onMounted(async () => {
  isLoadingSign.value = true
  const result = await indexApi.getSignInfo()
  signInfo.value = result.data
  isLoadingSign.value = false
})
const signInfo = ref<any>({
  isSign: false,
  maxConstantNum: 0
})
const sign =async (offset:number) => {
  const result = await indexApi.sign(offset)
  if (result.code == 200) {
    signInfo.value = result.data
    message.success('签到成功');
  }
}

const isShowSign = ref(false)
const isLoadingSign = ref(true)
</script>

<template>
  <div class="left-1-2" @click="isShowSign = true">
    <div class="header">
      <div class="header-left">
        每日签到
      </div>
      <a-button size="small"
                @click="isShowSign = true"
                :disabled="signInfo.isSign"
                :type="signInfo.isSign ? 'text' : 'primary'">
        {{signInfo.isSign ? '已签到' : '签到'}}
      </a-button>
    </div>
    <div class="content">
      已连续签到
      <span style="color: #7e2424;font-weight: 600">{{signInfo.maxConstantNum}}</span>
      天
    </div>
    <a-modal v-model:open="isShowSign" width="360px" id="sign-modal"
             style="min-height: 400px;text-align: center;">
      <template #footer></template>

      <a-skeleton
          :loading="isLoadingSign"
          active style="height: 100%;">
        <Sign
            :signInfo="{signInfo:signInfo.signInfo
            ,signRepairAbleNum:signInfo.signRepairAbleNum
            ,score:signInfo.score
            ,repairSignInfo:signInfo.repairSignInfo}"
            @sign="sign"></Sign>
      </a-skeleton>
    </a-modal>
  </div>
</template>
<style scoped lang="scss">
.left-1-2{
  .header{
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    font-size: 16px;

  }
  .content {
    color: rgb(114, 118, 132);
    font-weight: 50;
  }
}
:deep(#sign-modal .ant-modal-content){
  padding: 0;
}
#sign-modal .ant-modal-content{
  padding: 0;
}
</style>
